<template>
    <div>
        <h3><center>{{departmentname}}</center></h3>
            <el-table
                    :data="doctors"
                    border
                    style="width: 100%">

                <el-table-column
                        label="图片"
                        align="center" >
                    <template #default="scope">
                        <img style="width: 100px;height: 120px" :src="scope.row.avatar">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180" align="center" >
                </el-table-column>
                <el-table-column
                        label="类别"
                        align="center" >
                    <template #default="scope">
                        <p v-if="scope.row.level=='1'">专家号</p>
                        <p v-if="scope.row.level=='2'">普通号</p>
                    </template>
                </el-table-column>
                <el-table-column
                        label="挂号费"
                        align="center" >
                    <template #default="scope">
                        <p v-if="scope.row.level=='1'">30</p>
                        <p v-if="scope.row.level=='2'">15</p>
                    </template>
                </el-table-column>
                <el-table-column label="日期" align="center">
                <el-table-column
                        :label="date[0].time"
                        align="center" >
                    <template #default="scope">
                        <p  v-for="schedule in schedules" >
                            <span v-if="scope.row.id==schedule.did&&schedule.date==datepro[0].time&&schedule.number!=0">
                                <el-button type="success" @click="registrationSubmit(schedule.date,scope.row.id,scope.row.name,scope.row.level)" plain>
                                    预约
                                </el-button>
                                <br>
                                （剩余数量：{{schedule.number}}）
                            </span>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column
                        :label="date[1].time"
                        align="center" >
                    <template #default="scope">
                        <p  v-for="schedule in schedules" >
                            <span v-if="scope.row.id==schedule.did&&schedule.date==datepro[1].time&&schedule.number!=0">
                                <el-button type="success" @click="registrationSubmit(schedule.date,scope.row.id,scope.row.name,scope.row.level)" plain>
                                    预约
                                </el-button>
                                <br>
                                （剩余数量：{{schedule.number}}）
                            </span>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column
                        :label="date[2].time"
                        align="center" >
                    <template #default="scope">
                        <p  v-for="schedule in schedules" >
                            <span v-if="scope.row.id==schedule.did&&schedule.date==datepro[2].time&&schedule.number!=0">
                                <el-button type="success" @click="registrationSubmit(schedule.date,scope.row.id,scope.row.name,scope.row.level)" plain>
                                    预约
                                </el-button>
                                <br>
                                （剩余数量：{{schedule.number}}）
                            </span>
                        </p>
                    </template>
                </el-table-column>
                <el-table-column
                        :label="date[3].time"
                        align="center" >
                    <template #default="scope">
                        <p  v-for="schedule in schedules" >
                            <span v-if="scope.row.id==schedule.did&&schedule.date==datepro[3].time&&schedule.number!=0">
                                <el-button type="success" @click="registrationSubmit(schedule.date,scope.row.id,scope.row.name,scope.row.level)" plain>
                                    预约
                                </el-button>
                                <br>
                                （剩余数量：{{schedule.number}}）
                            </span>
                        </p>
                    </template>
                </el-table-column>

                <el-table-column
                        :label="date[4].time"
                        align="center" >
                    <template #default="scope">
                        <p  v-for="schedule in schedules" >
                            <span v-if="scope.row.id==schedule.did&&schedule.date==datepro[4].  time&&schedule.number!=0">
                                <el-button type="success" @click="registrationSubmit(schedule.date,scope.row.id,scope.row.name,scope.row.level)" plain>
                                    预约
                                </el-button>
                                <br>
                                （剩余数量：{{schedule.number}}）
                            </span>
                        </p>
                    </template>
                </el-table-column>
                </el-table-column>
            </el-table>
        <center>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 40]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="doctors.length"
            >
            </el-pagination>
        </center>

        <el-dialog   v-model="FormVisble" width="420px" >
            <h1 style="margin-left: 65px">
                <div>挂号日期:{{registration.date}}
                <br>
                挂号医生:{{name}}
                </div>
                挂号费用:<span v-if="level==1">30</span><span v-else>15</span>
                元
            </h1>
            <center><img style="width: 400px;height: 400px;" src="../img/Code.jpg"></center>
            <center><el-button type="primary" @click="OnSubmit"> 确认支付</el-button></center>
        </el-dialog>
    </div>
</template>

<script>
    import axios from "axios";
    import {ElMessage} from "element-plus";
    import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
    import {useStore} from "vuex";
    export default {
        name: "ChooseDoctor",

        data(){

            return{
                FormVisble:false,
                department:'',
                departmentname:'',
                name:'',
                level: '',
                date:[{
                    id:1,
                    time:''
                },{
                    id:2,
                    time:''
                },{
                    id:3,
                    time:''
                },{
                    id:4,
                    time:''
                },{
                    id:5,
                    time:''
                }],
                datepro:[{
                    id:1,
                    time:''
                },{
                    id:2,
                    time:''
                },{
                    id:3,
                    time:''
                },{
                    id:4,
                    time:''
                },{
                    id:5,
                    time:''
                }],
                doctors:{
                    avatar:'',
                    deleted:0,
                    gmtCreate:'',
                    gmtUpdate:'',
                    id: '',
                    name: '',
                    info:'',
                    career:'',
                    level:'',
                    sex:'',
                    idCard:'',
                    password:'',
                    phone:'',
                    departmentId: '',
                },
                doctors:[],
                schedules:{
                    id:'',
                    date:'',
                    number:'',
                    did:''
                },
                schedules:[],
                registration:{
                    date: "",
                    did: "",
                    id: "",
                    pid: ""
                },
                value: '',
                currentPage:1, //初始页
                pagesize:8,    //    每页的数据
                dialogFormVisible: false,
                addFormVisible: false,
            }
        },
        activated() {
            this.department=localStorage.getItem('departmentId');
            this.departmentname=localStorage.getItem('departmentname');
            this.create();
            this.currentTime();
        },
        methods:{
            create(){

                axios.post("http://119.29.60.153:8001/doctorservice/schedule/getScheduleByDepartmentId?departmentId="+this.department).then(resp=> {
                    this.doctors=resp.data.data.list;
                    this.schedules= resp.data.data.schedules;
                })
            },
            registrationSubmit(date,did,name,level){
                this.registration.date=date;
                this.registration.did=did;
                this.registration.pid=localStorage.getItem("id");
                this.name=name;
                this.level=level;
                this.FormVisble=true;
            },
            OnSubmit(){
                axios.post("http://119.29.60.153:8001/doctorservice/registration/addRegistration",this.registration).then(resp=> {
                    if(resp.data.success==true){
                        if(resp.data.message=='挂号失败，已无号！')
                        {
                            ElMessage.error("挂号失败，已无号!");
                        }
                        ElMessage.success("挂号成功!");
                        this.FormVisble=false;
                        this.$router.push('/orderList')
                    }
                    else {
                        ElMessage.error("挂号失败!");
                        this.addFormVisible=false;

                    }
                })
            },
            currentTime() {
                setInterval(this.formatDate, 500);
            },
            formatDate() {
                let date = new Date();
                let year = date.getFullYear(); // 年
                let month = date.getMonth() + 1; // 月
                let day = date.getDate(); // 日
                for(var i=0;i<5;i++){
                    if(day+i>30){
                        month++;
                        day=1;
                        this.date[i].time = `${month}-${day}`;
                        this.datepro[i].time = `${year}-${month}-${day}`;
                        for(var j=i+1,v=1;j<5;j++,v++){
                            this.date[j].time = `${month}-${day+v}`;
                            this.datepro[j].time = `${year}-${month}-${day+v}`;
                        }
                        break;
                    }else {
                        this.date[i].time = `${month}-${day+i}`;
                        this.datepro[i].time=  `${year}-${month}-${day+i}`;
                    }

                }


            },
            handleSizeChange: function (size) {
                this.pagesize = size;
                console.log(this.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;
                console.log(this.currentPage)  //点击第几页
            },
        }

    }
</script>

<style scoped>

</style>